<template>
	<div class='bcf fxmc p10 cp rel ease user-control' :class="{'r100px':!show, 'active':show }" :style="{margin:show?'0 10px 0':'5px 10px 5px'}" style='min-width:200px'>
		<div class='ex fxm no-event'>
			<i style='width:40px;height:40px;background-color: #CFCFCF;' class='r100px'>
				<img :src='header || Img_header' class='wh r100px' />
			</i>
			<dl class='ml10'>
				<dt class='b'>{{ name || '--'}}</dt>
				<dd class='g9 f13' style='margin-top: 6px;'>{{ sub || '--'}}</dd>
			</dl>
		</div>
		<figure class='no-event'><img class='arrow linear' :src='Ico_arrow' style='width:20px'/></figure>
		<nav class='abs_lt w lh40 tc bcf user-control-list dn ' @mousedown.stop=''>
			<a @click="onLink({title:'个人信息', name:'person', path:'/main/person/info'})">个人信息</a>
			<a @click="onLink({title:'修改密码', name:'person', path:'/main/person/pwd'})">修改密码</a>
			<!-- <router-link to='/main/person/workbench'>我的消息</router-link> -->
			<a @click='onClear'>清除缓存</a>
			<a @click='onLogout'>退出</a>
		</nav>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	/* --------------------------- Sync Function --------------------------- */
	import Logout from '@com/login/logout'
	import clearCache from '@com/login/clearCache'
	/* --------------------------- image --------------------------- */
	import Img_header from '@img/user.png'
	import Ico_arrow from '@img/arrow.png'
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		header: String,
		name: String,
		sub: String
	})
	
	let show = $ref()
	
	// 清除缓存
	const onClear = () => clearCache()
	// 退出登录
	const onLogout = ()=> Logout({ api:'user/logout', router })
	// 跳转
	const emit = defineEmits(['select'])
	const onLink = value => {
		emit('link', value)
	}
	$fn.onHideShow('user-control', show, v => show = v )
</script>
<style scoped>
	.user-control-list{top:55px;box-shadow: 0 3px 5px #ddd;}
	.user-control-list a{display:block}
	.user-control-list a:hover{background-color: rgba(0,0,0,0.05);}
	.user-control.active nav{display:block}
	.user-control.active .arrow{transform: rotate(-180deg);}
</style>